<template>
  <image :src="data.mch.logo || '../../static/logos.png'" class="logo" />
  <button open-type="getPhoneNumber" @getphonenumber="phone" v-if="data.checkbox">手机号快捷登录</button>
  <button @click="wt" v-else>手机号快捷登录</button>
  <view class="check">
    <switch type="checkbox" :checked="data.checkbox" @change="check" color="#F94B30" />
    <view class="info">
      我已阅读并同意
      <text @click="toxieyi">《悦码本地生活用户协议》</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { api } from '@/api/store_api';
import { back, err, to, toast } from '@/utils/uniapi';
const data = reactive({
  mch: { logo: '' },
  checkbox: false
});
async function phone(e: any) {
  console.log(e);
  try {
    const reqCode = e.detail.code;
    const res: any = await api.phone({ reqCode });

    if (res.respCode === 200) {
      toast('登录成功');
      back();
    } else {
      toast(res.msg);
      err(res.msg);
    }
  } catch (error) {
    err(error);
  }
}
function check(e: any) {
  const checkbox = e.detail.value;
  data.checkbox = checkbox;
}
function wt() {
  toast('请阅读并勾选《悦码本地生活用户协议》');
}
function toxieyi() {
  to("/user/xieyi/xieyi")
}
</script>

<style scoped lang="scss">
.logo {
  width: 260rpx;
  height: 260rpx;
  margin: 0 auto;
  margin-top: 168rpx;
  background-color: #f6f6f6;
  border-radius: 50%;
}
button {
  width: 520rpx;
  height: 80rpx;
  background-color: #c32136;
  font-size: 32rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 80rpx;
  border-radius: 24rpx;
  margin-top: 84rpx;
}
.check {
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  margin-top: 26rpx;
}
switch {
  float: left;
  margin-right: 10rpx;
}
.info {
  float: left;
  font-size: 24rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: rgba(61, 61, 61, 0.8);
  line-height: 54rpx;
}
.info text {
  color: #41557a;
}
</style>
